@import "mixins/mixins";
@import "mixins/_button";
@import "common/variables";

// 引入命名空间
@include block(button) {
  display: inline-block;
  box-sizing: border-box;
  line-height: 1;
  text-align: center;
  transition: .1s;
  border: 1px solid $border-base-color;
  background-color: $button-default-background-color;
  border-color: $button-default-border-color;
  color: $button-default-font-color;
  font-weight: $font-weight-primary;
  outline: 0;
  cursor: pointer;

  // 两个相近的button 中间隔开10像素
  & + & {
    margin-left: 10px;
  }

  & [class*="el-icon-"] {
    & + span {
      margin-left: 5px;
    }
  }

  &:hover,
  &:focus,
  &:active {
    background-color: rgba($button-primary-background-color, 0.1);
    border-color: rgba($button-primary-border-color, 0.2);
    color: $primary-color;
  }

  // 生成button大小尺寸
  @include button-size($button-padding-vertical, $button-padding-horizontal, $button-font-size, $button-border-radius);

  // 圆角
  @include when(round) {
    border-radius: $button-padding-vertical;
  }

  // 圆形
  @include when(circle) {
    border-radius: 50%;
    padding: $button-padding-vertical;
  }

  // 方形
  @include when(square) {
    padding: $button-padding-vertical;
  }

  // 加载中
  @include when(loading) {
    position: relative;
    pointer-events: none;

    &:before {
      pointer-events: none;
      content: '';
      position: absolute;
      left: -1px;
      top: -1px;
      right: -1px;
      bottom: -1px;
      border-radius: inherit;
      background-color: rgba(255, 255, 255, .35);
    }
  }

  // 禁用
  @include when(disabled) {
    &,
    &:hover,
    &:focus,
    &:active {
      background-color: $button-disabled-background-color;
      border-color: $button-disabled-border-color;
      color: $button-disabled-font-color;
    }
    cursor: not-allowed;
  }

  // 按钮 - 大
  @include modifier(large) {
    @include button-size($button-large-padding-vertical, $button-large-padding-horizontal, $button-large-font-size, $button-large-border-radius);
  }

  // 主要颜色
  @include modifier(primary) {
    @include button-variant($button-primary-background-color, $button-primary-border-color, $button-primary-font-color);
  }

  // 成功颜色
  @include modifier(success) {
    @include button-variant($button-success-background-color, $button-success-border-color, $button-success-font-color);
  }

  // 警告颜色
  @include modifier(warning) {
    @include button-variant($button-warning-background-color, $button-warning-border-color, $button-warning-font-color);
  }

  // 描述颜色
  @include modifier(info) {
    @include button-variant($button-info-background-color, $button-info-border-color, $button-info-font-color);
  }

  // 危险颜色
  @include modifier(danger) {
    @include button-variant($button-danger-background-color, $button-danger-border-color, $button-danger-font-color)
  }

}
